<template>
    <div class="notFound">
        <img src="../assets/images/404.jpg" />
        <div class="backTime"><span style="color: #ff5722;">{{ time }}</span>&nbsp;秒后返回首页</div>
    </div>
</template>

<script>
    export default {
        name: "NotFound",
        data () {
            return {
                time: "3",
            }
        },

        methods: {
            // 设置返回首页的时间
            setBackTime () {
                let time = 3;
                let timer = setInterval(() => {
                    if (time > 0) {
                        time = time - 1;
                    }

                    if (time <= 0) {
                        time = 0;

                        // 关闭定时器
                        clearInterval(timer);

                        // 回到上一页
                        this.$router.push("/")
                    }

                    this.time = time;
                }, 1000)
            }
        },

        created () {
            this.setBackTime();
        }
    }
</script>

<style scoped>
    .notFound {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #f4f5f7;
    }

    .notFound > img {
        display: block;
        margin: 50px auto 0 auto;
    }

    .notFound .backTime {
        text-align: center;
        line-height: 30px;
    }
</style>
